<template>
    <div class="csv-processor">
        <h1>CSV 文件处理</h1>
        <input type="file" @change="handleFileUpload" accept=".csv" />
        <button @click="downloadNewCSV" :disabled="!newCSVContent">
            下载新 CSV
        </button>
        <div v-if="error" class="error">{{ error }}</div>
    </div>
    <div id="graphdiv2" style="width: 1950px; height: 1100px"></div>
</template>

<script setup>
import { ref } from 'vue'
import Dygraph from 'dygraphs'

const file = ref(null)
const newCSVContent = ref(null)
const error = ref(null)

const handleFileUpload = (event) => {
    file.value = event.target.files[0]
    if (!file.value) {
        error.value = '请选择一个文件'
        return
    }
    if (!file.value.name.endsWith('.csv')) {
        error.value = '请上传一个 CSV 文件'
        return
    }
    error.value = null
    readCSVFile()
}

const readCSVFile = () => {
    // eslint-disable-next-line no-undef
    const reader = new FileReader()
    reader.onload = (e) => {
        const content = e.target.result
        processCSVContent(content)
    }
    reader.onerror = () => {
        error.value = '读取文件时出错'
    }
    reader.readAsText(file.value)
}

const processCSVContent = (content) => {
    const lines = content.split('\n')
    if (lines.length < 2) {
        error.value = 'CSV 文件内容不足'
        return
    }

    // 删除第一行
    lines.shift()

    // 获取新的表头
    const header = lines.shift()
    console.log(header)
    const columns = header.split(',')
    console.log(columns)

    // 检查表头是否包含日期和时间列
    const dateIndex = columns.indexOf('日期')
    const timeIndex = columns.indexOf('时间')
    if (dateIndex === -1 || timeIndex === -1) {
        error.value = 'CSV 文件中缺少日期或时间列'
        return
    }

    // 删除日期和时间列
    columns.splice(dateIndex, 1)
    columns.splice(timeIndex - 1, 1) // 注意：删除日期列后，时间列的索引会变化

    // 在最前面新建一列，命名为“时间”
    columns.unshift('时间')

    const processedLines = [columns.join(',')] // 新的表头
    console.log(lines, '3333333')
    lines.forEach((line) => {
        const columns = line.split(',')
        if (columns.length > Math.max(dateIndex, timeIndex)) {
            try {
                // 合并日期和时间，并转换为 ISO 8601 格式
                const dateTime = convertToISO8601(
                    columns[dateIndex],
                    columns[timeIndex]
                )
                // 删除日期和时间列
                columns.splice(dateIndex, 1)
                columns.splice(timeIndex - 1, 1) // 注意：删除日期列后，时间列的索引会变化
                // 在最前面插入合并后的日期时间
                columns.unshift(dateTime)
            } catch (err) {
                error.value = err.message
                return // 保留原行，不处理
            }
        }
        processedLines.push(columns.join(','))
    })

    newCSVContent.value = processedLines.join('\n')
    console.log(newCSVContent.value)
}

const convertToISO8601 = (dateStr, timeStr) => {
    // 手动解析日期和时间字符串
    const [year, month, day] = dateStr.split('/').map(Number)
    const [hours, minutes, seconds] = timeStr.split(':').map(Number)

    // 构造 Date 对象
    const dateObj = new Date(year, month - 1, day, hours, minutes, seconds)

    // 检查日期是否有效
    if (isNaN(dateObj.getTime())) {
        throw new Error(`无效的日期或时间格式: ${dateStr} ${timeStr}`)
    }

    // 返回 ISO 8601 格式的字符串
    return dateObj.toISOString()
}
</script>

<style scoped>
.error {
    color: red;
}
</style>
